<template>
  <el-form
      ref="loginForm"
      :model="loginFormData"
      status-icon
      :rules="commonRules"
      label-width="120px"
      class="demo-loginFormData"
    >
    <!-- 海贼王名 -->
      <el-form-item label="海贼王账号" prop="username" class="username-for-item">
        <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
      </el-form-item>
      <!-- 海贼王密码 -->
      <el-form-item label="海贼王密码" prop="password" class="password-for-item">
        <el-input
          v-model="loginFormData.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <!-- 海贼王验证码 -->
      <el-form-item label="海贼王验证码" prop="captcha" class="captcha-for-item">
        <div >
          <el-input v-model="loginFormData.captcha" />
        <span v-html="captcha"></span>
        </div>
        
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(loginForm)"
          >启航</el-button
        >
      </el-form-item>
    </el-form>
</template>
<script  setup>
import { reactive, ref,onMounted} from 'vue'
import { smsApi,getCaptchaApi } from '../../api/users';

// 引入校验函数
import {commonRules,useSubmitForm}from "../../composition/login/validate.js"

//  表单校验成功之后，回调的方法
let validatesSuccess = ()=>{
  console.log('校验成功');
}


// 表单校验失败，回调的方法
let validateFailed = ()=>{
console.log('校验失败');
}
// 使用submitFrom

let submitForm = useSubmitForm(validatesSuccess,validateFailed)

const loginForm = ref()

// 注入到表单的数据
const loginFormData = reactive({
  username: '',
  password: '',
  captcha: '',
})

let captcha = ref("")

onMounted(()=>{
  getCaptchaApi()
.then(res =>{
  console.log(res,"kkkkk");
  if(res.data.state){
    captcha.value = res.data.img
  }
  
})
})

</script>
<style lang="scss" scoped>
#app{
    height: 100%;
}
.video{
    width: 100%;
//    height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   position: fixed;
}
.em{
    width: 400px;
    height: 500px;
    background-color: rgb(0, 0, 0,0.3);
    position: fixed;
    top: 300px;
    right: 200px;
}
h1{
    color: red;
    text-align:center;
    padding: 80px 0px 60px 0px
    
    
}
// 定制组件，修改样式的思路
// 1.找到对应组件结构的类名
// 2.重新编写样式，覆盖原来的样式

// 样式修改不成功的因素和解决方案

// 1.确认类名是否正确

// 2.确认权重是否足够 ！important

// 3.是否需要使用深度选择器 xx :deep(选择器) scoped样式，层级嵌套比较深的时候
    .username-for-item{
        .el-input{
            width: 200px !important;
            :deep(.el-input__inner){
                color: blue;
            }
        }
    }
    .password-for-item{
        .el-input{
            width: 200px !important;
            :deep(.el-input__inner){
                color: red;
            }
        }
    }
    .captcha-for-item{
        .el-input{
            width: 120px !important;
            :deep(.el-input__inner){
                color: green;
            }
        }
        div{
            width: 200px !important;
            background-color: white ;
            border-radius: 5px;
          }
          .b{
            width: 50px ;
            text-align: center ;
          }
    }

</style>
  